// 定义内外边距，历遍1-80
@for $i from 0 through 80 {
  // 只要双数和能被5除尽的数
  @if $i % 2 == 0 or $i % 5 == 0 {
    // 得出：u-margin-30或者u-m-30
    .u-margin-#{$i},
    .u-m-#{$i} {
      margin: $i + rpx !important;
    }

    // 得出：u-padding-30或者u-p-30
    .u-padding-#{$i},
    .u-p-#{$i} {
      padding: $i + rpx !important;
    }

    // 定义上下外边距
    .u-m-tb-#{$i} {
      margin: $i + rpx 0 !important;
    }
    // 定义左右外边距
    .u-m-lr-#{$i} {
      margin: 0 $i + rpx !important;
    }
    // 定义上下内边距
    .u-p-tb-#{$i} {
      padding: $i + rpx 0 !important;
    }
    // 定义左右内边距
    .u-p-lr-#{$i} {
      padding: 0 $i + rpx !important;
    }

    // 自动左外边距
    .u-m-l-auto {
      margin-left: auto;
    }

    // 自动右外边距
    .u-m-r-auto {
      margin-right: auto;
    }

    @each $short, $long in l left, t top, r right, b bottom {
      // 缩写版，结果如： u-m-l-30
      // 定义外边距
      .u-m-#{$short}-#{$i} {
        margin-#{$long}: $i + rpx !important;
      }

      // 定义内边距
      .u-p-#{$short}-#{$i} {
        padding-#{$long}: $i + rpx !important;
      }

      // 完整版，结果如：u-margin-left-30
      // 定义外边距
      .u-margin-#{$long}-#{$i} {
        margin-#{$long}: $i + rpx !important;
      }

      // 定义内边距
      .u-padding-#{$long}-#{$i} {
        padding-#{$long}: $i + rpx !important;
      }
    }
  }
}

@for $i from 9 to 60 {
  .u-font-#{$i} {
    font-size: $i + rpx;
  }
  .fs-#{$i} {
    font-size: $i + rpx;
  }
}
.u-flex {
  display: flex;
  align-items: center;
}
.u-flex-col {
  display: flex;
  flex-direction: column;
}
.u-flex-wrap {
  flex-wrap: wrap;
}

.u-flex-nowrap {
  flex-wrap: nowrap;
}

.u-col-center {
  align-items: center;
}

.u-col-top {
  align-items: flex-start;
}

.u-col-bottom {
  align-items: flex-end;
}

.u-row-center {
  justify-content: center;
}

.u-row-left {
  justify-content: flex-start;
}

.u-row-right {
  justify-content: flex-end;
}

.u-row-between {
  justify-content: space-between;
}

.u-row-around {
  justify-content: space-around;
}

.u-font-bold {
  font-weight: bold;
}
.u-type-info {
  color: #909399;
}
//对齐
@each $var in (left, center, right) {
  .u-text-#{$var} {
    text-align: $var !important;
  }
}

@for $i from 1 through 5 {
  .u-line-#{$i} {
    // vue下，单行和多行显示省略号需要单独处理
    @if $i == 1 {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    } @else {
      display: -webkit-box !important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: $i;
      -webkit-box-orient: vertical !important;
    }
  }
}

.main-color {
  color: $main-color;
}